<template>
  <div class="tabsBox">
    <div class="rightTime">
      <el-date-picker v-model="searchDay" @change="getEcharts()" type="date" placeholder="选择日期"></el-date-picker>
    </div>
    <el-tabs v-model="bottomActiveName2" @tab-click="handleClick">
      <el-tab-pane label="日任务" name="1">
        <center-one-echarts-line ref="centerOneEchartsLine" />
      </el-tab-pane>
      <!-- <el-tab-pane label="时段" name="2">
        <center-two-echarts-line ref="centerTwoEchartsLine" />
      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>
<script>
import { timeFormatToString } from '@/utils/function'
import centerOneEchartsLine from './centerLine/centerOneEchartsLine'
import centerTwoEchartsLine from './centerLine/centerTwoEchartsLine'
export default {
  components: {
    centerOneEchartsLine,
    centerTwoEchartsLine
  },
  props: {},
  data() {
    return {
      bottomActiveName2: '1',
      interval: null,
      searchDay: ''
    }
  },
  watch: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    async getEcharts() {
      this.searchDay =
        this.searchDay !== ''
          ? timeFormatToString(this.searchDay).slice(0, 10)
          : ''
      this.$refs['centerOneEchartsLine'].getInfoEcharts(this.searchDay || '')
    },
    handleClick(tab, event) {
      setTimeout(() => {
        if (tab.name === '2') {
          this.$refs['centerTwoEchartsLine'].setEqTimeIntervalLine()
          this.$refs['centerTwoEchartsLine'].infoSize()
        } else {
          this.$refs['centerOneEchartsLine'].getInfoEcharts(this.searchDay)
          this.$refs['centerOneEchartsLine'].infoSize()
        }
      }, 500)
    }
  }
}
</script>
<style lang='scss' scoped>
.tabsBox {
  height: calc(100% - 45px);
  .rightTime {
    width: 130px;
    position: absolute;
    right: 10px;
    top: 18px;
  }
}
</style>
<style lang='scss'>
.bottomCenterEcharts {
  position: relative;
  .el-tabs__header {
    position: absolute;
    top: 13px;
    width: 200px;
    left: 70px;
    margin: 0;
    .el-tabs__item {
      width: 50px;
      padding: 0 10px;
    }
    .is-active {
      color: #7e54f4;
    }
  }
}
</style>
